import { NavLink, Outlet, useLoaderData, useSubmit } from 'react-router-dom'
import './category.scss'
import { Add, AllApplication, FolderFailed } from '@icon-park/react'
import CategoryItem from '@renderer/components/CategroyItem'

export default function Category() {
  // 拿到路由加载器中的数据
  const categories: CategoryType[] = useLoaderData()

  const submit = useSubmit()

  return (
    <main className="category-page">
      <div className="category">
        <div className="quickAction">
          <div className="text">快捷操作</div>
          {/* 加上end属性，表示当路径完全匹配时才激活该链接 */}
          <NavLink to={`/config/category/contentList`} end className="my-1">
            <div className="flex items-center gap-1">
              <AllApplication theme="outline" size="12" strokeWidth={3} />
              <div className="font-bold">所有片段</div>
            </div>
          </NavLink>
          <NavLink to={`/config/category/contentList/0`} end className="my-1">
            <div className="flex items-center gap-1">
              <FolderFailed theme="outline" size="12" strokeWidth={3} />
              <div className="font-bold ">未分类</div>
            </div>
          </NavLink>
        </div>
        {categories.map((category) => (
          <CategoryItem category={category} key={category.id} />
        ))}
      </div>
      <div className="nav">
        <Add
          theme="outline"
          size="20"
          strokeWidth={2}
          onClick={() => submit(null, { method: 'POST' })}
          className="cursor-pointer"
        />
        {/* <Link to="/config">
          <DatabaseSetting theme="outline" size="20" strokeWidth={2} className="cursor-pointer" />
        </Link> */}
      </div>
      <div className="contentList">
        <Outlet />
      </div>
    </main>
  )
}
